<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="5" :offset="0">
        <p class="line mt0"><span>仓库名称：</span>{{ fatherData.name }}</p>
        <p class="line mt0"><span>仓库编码：</span>{{ fatherData.code }}</p>
        <p class="line mt0"><span>创建时间：</span>{{ fatherData.createTime | parseTime("YYYY/MM/DD HH:mm") }}</p>
      </el-col>
      <el-col :span="5" :offset="0">
        <p class="line"><span>联系人：</span>{{ fatherData.linkPerson }}</p>
        <p class="line"><span>联系人电话：</span>{{ fatherData.linkPhone }}</p>
        <p class="line"><span>更新时间：</span>{{ fatherData.updateTime | parseTime("YYYY/MM/DD HH:mm") }}</p>
      </el-col>
      <el-col :span="14" :offset="0">
        <p class="line"><span>仓库状态：</span>{{ fatherData.status == 0 ? '开启' : '未开启' }}</p>
        <el-tooltip class="item" effect="dark"
          :content="(fatherData.region + fatherData.address) ? (fatherData.region + fatherData.address) : ''"
          placement="top">
          <p class="line"><span>仓库地址：</span>{{ fatherData.region }}{{ fatherData.address }}</p>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="fatherData.description" placement="bottom">
          <p class="line"><span>仓库描述：</span>{{ fatherData.description }}</p>
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <div class="right_table">
      <div class="top_info">
        <el-button class="addBtn" @click="showModel" :disabled="!Boolean(warehouseId)"
          v-has="'addregion'">新增区域</el-button>
        <el-button class="delBtn" :disabled="!selectNum" @click="$delFn('区域', delRegionById)"
          v-has="'delregion'">批量删除</el-button>
        已选中 {{ selectNum }} 行
      </div>
      <div style="flex: 1;overflow: hidden" >
        <el-table border class="tablebox" :data="tableData" style="width: 100%"
          @selection-change="handleSelectionChange" size="medium" height="100%" >
          <el-table-column align="center" type="selection" width="55">
          </el-table-column>
          <el-table-column align="center" prop="name" label="区域名称" min-width="120">
          </el-table-column>
          <el-table-column align="center" prop="code" label="区域编码" min-width="120">
          </el-table-column>
          <el-table-column align="center" prop="commodityCount" label="关联商品品相数" width="130">
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="200"
            v-if="$showFn(['editregion', 'delregion'])">
            <template slot-scope="scope">
              <el-button @click="showModel(scope.row)" type="text" v-has="'editregion'">修改</el-button>
              <el-button @click="$delFn('区域', delRegionById, scope.row.id)" type="text" style="color: red;"
                v-has="'delregion'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="padding-top: 20px;" >
        <el-pagination background :current-page.sync="page.pageNum" :page-sizes="$pageSizes"
        :page-size.sync="page.pageSize" :pager-count="5" layout="total, ->,sizes, prev, pager, next, jumper" :total="page.total"
        @size-change="changePageSize" @current-change="getWarehouseDetail" />
      </div>
    </div>



    <el-dialog destroy-on-close :title="id == '' ? '新增区域' : '修改区域'" :visible.sync="addOrEditDialog" width="30%">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="区域名称：" prop="name">
          <el-input v-clearEmoji v-model.trim="form.name" placeholder="请输入..." />
        </el-form-item>
        <el-form-item label="区域编码：" prop="code">
          <el-input v-clearEmoji v-model.trim="form.code" placeholder="请输入..." />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button class="celBtn" @click="cancleDialog">取 消</el-button>
        <el-button class="addBtn" @click="submit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqWarehouseDetail, reqAddRegion, reqEditRegion, reqDelRegionById } from '@/api/warehouse';
export default {
  name: 'FatherTreeNode',
  // props:['fatherData'],
  props: ['warehouseId'],
  data() {
    return {
      id: '',
      // 删除的id集合,
      idList: [],
      // 分页
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      fatherData: {},
      // 添加表单
      form: {
        name: '',
        code: '',
      },
      rules: {
        name: [{
          required: true,
          message: '请输入区域名称',
          trigger: 'blur'
        }, {
          min: 0,
          max: 15,
          message: '区域名称长度不能超过15个字符',
          trigger: 'blur'
        }],
        code: [{
          required: true, message: '请输入区域编码', trigger: 'blur'
        }, {
          min: 0,
          max: 15,
          message: '区域编码长度不能超过15位数字',
          trigger: 'blur'
        }],
      },
      // 当前选中数量
      selectNum: 0,
      addOrEditDialog: false,
    }
  },
  computed: {
    tableData() {
      if (this.fatherData.pageInfo) return this.fatherData.pageInfo.list;
      else return [];
    },
  },
  methods: {
    // 获取仓库详情
    async getWarehouseDetail() {
      let { pageNum, pageSize } = this.page;
      if (!this.warehouseId) return;
      let reqObj = { id: this.warehouseId, pageNum, pageSize };
      let res = await reqWarehouseDetail(reqObj);
      if (res.code === 200) {
        this.fatherData = res.data;
        this.page.total = res.data.pageInfo.total;
        this.idList = [];
      }
    },
    changePageSize() {
      this.page.pageNum = 1;
      this.getWarehouseDetail();
    },
    // 显示选中几行
    handleSelectionChange(selectList) {
      this.idList = selectList.map(item => item.id);
      this.selectNum = selectList.length;
    },
    async delRegionById(id) {
      let res = {};
      if (typeof id == 'string') {
        res = await reqDelRegionById({ idList: [id] });
      } else {
        res = await reqDelRegionById({ idList: this.idList });
      }

      if (res.code === 200) {
        this.$message.success('删除成功');
        if ((this.tableData.length === this.idList.length || this.tableData.length === 1) && this.page.pageNum > 1) this.page.pageNum--;
        this.idList = [];
        // 重新加载树
        this.$emit('getWarehouseTreeList');
        // 重新加载列表
        this.getWarehouseDetail();
      } else {
        // this.$message.error(res.message)
      }
    },
    // 添加或修改
    showModel(regionObj) {
      if (regionObj.id !== undefined) {
        this.id = regionObj.id;
        this.form = { name: regionObj.name, code: regionObj.code }
      } else {
        this.id = '';
        this.form = { name: '', code: '' }
      }
      this.addOrEditDialog = true;
    },
    // 取消弹窗
    cancleDialog() {
      this.addOrEditDialog = false;
    },
    // 表单提交
    submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let { id, warehouseId } = this;
          let obj = { ...this.form, warehouseId };
          let res = {};
          if (id) {
            res = await reqEditRegion({ id, ...obj });
          } else {
            res = await reqAddRegion(obj);
          }
          if (res.code === 200) {
            this.$message.success(id ? '修改成功' : '添加成功');
            this.addOrEditDialog = false;
            // 重新加载树
            this.$emit('getWarehouseTreeList');
            // 重新加载列表
            this.getWarehouseDetail();
          } else {
            // this.$message.error(res.message)
          }
        } else {
          this.$message.warning('请检查填写的信息')
          return false;
        }
      });
    }
  },
  watch: {
    warehouseId: {
      immediate: true,
      handler() {
        this.getWarehouseDetail();
      },
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;

  .line {
    margin: 15px 0;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:nth-child(1) {
      margin-top: 0;
    }

    span {
      color: #aaaaaa;
      font-size: 15px;
    }
  }


  .right_table {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;

    .top_info {

      .el-button {
        margin-bottom: 0;
      }

      margin-bottom: 12px;
    }

    .table {
      width: 100%;
    }
  }

}
</style>